<template>
  <view class="he-page-content">
    <he-tabs
      ref="tabs"
      :list="tabs"
      :bar-height="4"
      :tabs-style="{ position: 'fixed', top: 0, width: '100%', zIndex: 2 }"
      :bar-bottom="24"
      :active-color="themeColor"
      :bold="false"
      bg-color="#F5F5F5"
      :height="114"
      :is-scroll="false"
      @change="change"
      :current="current"
    ></he-tabs>
    <index-list v-model="list" :tab-cur="tabCur"></index-list>
    <view class="he-nothing" v-show="isNothing">
      <image class="he-nothing__image" :src="ipAddress + '/order-background-empty.png'"></image>
      <view>暂无相关订单</view>
    </view>
    <he-load-more v-if="list.length > 0" :status="loadStatus"></he-load-more>
    <he-float-window pages-url="order-list"></he-float-window>
    <view class="safe-area-inset-bottom"></view>
  </view>
</template>
<script>
import indexNav from './components/index-nav.vue';
import indexList from './components/index-list.vue';
import heLoadMore from '@/components/he-load-more.vue';
import heTabs from '@/components/he-tabs.vue';
import heFloatWindow from '../../components/layout/he-float-window.vue';

export default {
  name: 'index',
  data() {
    return {
      tabCur: 'all',
      current: 0,
      page: {
        current: 1,
        size: 10,
        count: 1
      },
      list: [],
      isNothing: false,
      loadStatus: 'loadmore',
      loading: false,
      tabs: [
        { name: '全部', key: 'all' },
        { name: '待付款', key: 'unpaid' },
        { name: '待发货', key: 'unsent' },
        {
          name: '待收货',
          key: 'unreceived'
        },
        { name: '待评价', key: 'noevaluate' }
      ]
    };
  },
  components: {
    indexNav,
    indexList,
    heLoadMore,
    heTabs,
    heFloatWindow
  },
  methods: {
    setTab: function (callBack) {
      let _this = this;
      this.page.current = 1;
      this.isNothing = false;
      this.loading = true;
      this.loadStatus = 'loadmore';
      this.getList().then(function (res) {
        _this.loading = false;
        _this.list = res;
        _this.isNothing = _this.list.length === 0;
        _this.loadStatus = _this.list.length < _this.page.size ? 'nomore' : 'loadmore';
        callBack();
      });
    },
    getList: function () {
      let _this = this;
      return new Promise(function (resolve) {
        _this.$heshop
          .order('get', {
            tab_key: _this.tabCur
          })
          .page(_this.page.current, _this.page.size)
          .then(function (res) {
            let { data, headers } = res;
            resolve(data);
            // #ifdef MP-WEIXIN
            _this.page = {
              current: +headers['X-Pagination-Current-Page'],
              count: +headers['X-Pagination-Page-Count'],
              size: +headers['X-Pagination-Per-Page']
            };
            // #endif
            // #ifdef H5
            _this.page = {
              current: +headers['x-pagination-current-page'],
              count: +headers['x-pagination-page-count'],
              size: +headers['x-pagination-per-page']
            };
            // #endif
          })
          .catch(function (err) {
            _this.$toError(err);
          });
      });
    },
    change: function (e) {
      let _this = this;
      _this.tabCur = _this.tabs[e].key;
      this.setTab(function () {
        _this.current = e;
      });
    }
  },
  onLoad(options) {
    // #ifdef H5
    this.$wechat.init();
    // #endif
    this.tabCur = options.tabCur ? options.tabCur : 'all';
    for (let i = 0; i < this.tabs.length; i++) {
      if (this.tabs[i].key === this.tabCur) {
        this.current = i;
      }
    }
    let _this = this;
    this.getList().then(function (res) {
      _this.list = res;
      _this.isNothing = _this.list.length === 0;
      _this.loadStatus = _this.list.length < _this.page.size ? 'nomore' : 'loadmore';
    });
  },
  onShow() {
    //获取插件设置
    this.$store.dispatch('plugins/getPlugins');
    let storageKey = this.$storageKey.evaluation_post;
    let storage = uni.getStorageSync(storageKey);
    if (storage) {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].id === storage.id) {
          this.list[i].status = 204;
          if (this.tabCur === 'noevaluate' || this.tabCur === 'unreceived') {
            this.$delete(this.list, i);
            this.isNothing = this.list.length === 0;
          }
          uni.removeStorageSync(storageKey);
          break;
        }
      }
    }
  },
  onReachBottom() {
    let _this = this;
    if (this.page.count > this.page.current) {
      this.page.current++;
      this.loadStatus = 'loading';
      this.getList().then(function (res) {
        _this.list.push(...res);
        _this.loadStatus = 'loadmore';
      });
    } else {
      this.loadStatus = 'nomore';
    }
  }
};
</script>

<style scoped>
.he-page-content {
  overflow: hidden;
}

.he-nothing {
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  text-align: center;
}

.he-nothing__image {
  width: 320px;
  height: 320px;
}
</style>
